<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">网商手机点餐</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">编号</text>
					<!-- <input type="text" :value="code" placeholder="请输入编号" @input="inputCode" /> -->
					<u--input v-model="code" placeholder="请输入编号"></u--input>
				</view>
				<block v-if="code">
					<!-- <view class="input-item">
						<text class="tit">用户名</text>
						<input type="text" disabled :value="nickname" placeholder="请输入用户名" />
					</view> -->
					<view class="input-item">
						<text class="tit">密码</text>
						<!-- <input
							type="mobile"
							value=""
							placeholder="请输入密码"
							placeholder-class="input-empty"
							maxlength="20"
							password
							data-key="password"
							@input="inputChange"
							@confirm="toLogin"
						/> -->
						<u--input type="password" v-model="password" placeholder="请输入编号"></u--input>
					</view>
				</block>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining" v-if="code">登 录</button>
			<!-- <view class="forget-section">忘记密码?</view> -->
		</view>
		<view class="register-section">
			<!-- 还没有账号? -->
			<!-- <text @click="toRegist">马上注册</text> -->
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			nickname: '',
			password: '',
			logining: false,
			code: '',
			useList: [],
			showForm: false
		};
	},
	onLoad() {
		let userinfo = uni.getStorageSync('userInfo') || '';
		if(userinfo){
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}
		// let data_code = uni.getStorageInfoSync('data_code') || ""
		// if(data_code){
		// 	this.code = data_code
		// }
	},
	methods: {
		...mapMutations(['login']),
		inputCode(e) {
			let _this = this;
			// this.$http('login/getLoginByCode', {
			// 	code: this.code
			// }).then((res) => {
			// 	if (res.code) {
			// 		_this.showForm = true
			// 		_this.nickname = res.data.syjrymz;
			// 		_this.useList = res.data;
			// 	}
			// });
		},
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		navBack() {
			uni.navigateBack();
		},
		toRegist() {
			this.$api.msg('去注册');
		},
		async toLogin() {
			this.logining = true;
			let _this = this;
			/* 数据验证模块
				if(!this.$api.match({
					mobile,
					password
				})){
					this.logining = false;
					return;
				}
				*/
			uni.showLoading({
				title: '登录中'
			});
			const sendData = {
				code: _this.code,
				nickname: _this.nickname,
				password: _this.password
			};

			_this
				.$http('login/loginIn', {
					...sendData
				})
				.then((res) => {
					if (res.code) {
						
						uni.reLaunch({
							url: '/pages/index/index',
							success() {
								uni.setStorage({
									key: 'userInfo',
									data: res.data
								});
								uni.setStorage({
									key: 'data_code',
									data: sendData.code
								});
								uni.hideLoading();
							}
						});
						console.log(res.data);
					} else {
						uni.hideLoading();
						this.logining = false;
						uni.$u.toast(res.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
.container {
	padding-top: 115px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}
.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	padding-bottom: 40upx;
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}
.left-top-sign {
	font-size: 120upx;
	color: $page-color-base;
	position: relative;
	left: -16upx;
}
.right-top-sign {
	position: absolute;
	top: 80upx;
	right: -30upx;
	z-index: 95;
	&:before,
	&:after {
		display: block;
		content: '';
		width: 400upx;
		height: 80upx;
		background: #b4f3e2;
	}
	&:before {
		transform: rotate(50deg);
		border-radius: 0 50px 0 0;
	}
	&:after {
		position: absolute;
		right: -198upx;
		top: 0;
		transform: rotate(-50deg);
		border-radius: 50px 0 0 0;
		/* background: pink; */
	}
}
.left-bottom-sign {
	position: absolute;
	left: -270upx;
	bottom: -320upx;
	border: 100upx solid #d0d1fd;
	border-radius: 50%;
	padding: 180upx;
}
.welcome {
	position: relative;
	left: 50upx;
	top: -90upx;
	font-size: 46upx;
	color: #555;
	text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}
.input-content {
	padding: 0 60upx;
}
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 120upx;
	border-radius: 4px;
	margin-bottom: 50upx;
	&:last-child {
		margin-bottom: 0;
	}
	.tit {
		height: 50upx;
		line-height: 56upx;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
	}
	input {
		height: 60upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}
}

.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin-top: 70upx;
	background: $uni-color-primary;
	color: #fff;
	font-size: $font-lg;
	&:after {
		border-radius: 100px;
	}
}
.forget-section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 40upx;
}
.register-section {
	position: absolute;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	text-align: center;
	text {
		color: $font-color-spec;
		margin-left: 10upx;
	}
}
</style>
